<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:22:24
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="users">
    <my-top :toplist="toplist" @handeltopbutton="handeltopbutton"></my-top>
    <my-table
      :tableData="tableData"
      :tablelist="tablelist"
      @handeltablebutton="handeltablebutton"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :pager="pager"
    ></my-table>
    <my-loanding
      :loadingdata="loadingdata"
      :loandformVal="loandformVal"
      @handelloandbutton="handelloandbutton"
    ></my-loanding>
    <my-loanding
      :loadingdata="stardata"
      :loandformVal="starformval"
      @handelloandbutton="starbutton"
    ></my-loanding>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import MyTop from "@/components/child/MyTop.vue";
import MyTable from "@/components/child/MyTable.vue";
import MyLoanding from "@/components/child/MyLoanding.vue";
import UsersModel from "@/api/users";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  components: { MyTop, MyTable, MyLoanding },
  setup() {
    onMounted(() => {
      getuserslist();
    });
    const data = reactive({
      // 分页
      pager: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        pageSizes: [5, 10, 15],
      },
      // top
      topVal: "",
      //top 显示数据
      toplist: [
        {
          type: "input",
          model: "seachVal",
          label: "请输入内容",
          action: "seach",
        },
        {
          type: "action",
          list: [
            {
              type: "primary",
              name: "添加用户",
              action: "add",
            },
          ],
        },
      ],
      // table
      tableData: [],
      // table 显示
      tablelist: [
        {
          type: "index",
          label: "#",
        },
        {
          label: "用户名",
          prop: "username",
        },
        {
          label: "邮箱",
          prop: "email",
        },
        {
          label: "电话",
          prop: "mobile",
        },
        {
          label: "角色",
          prop: "role_name",
        },
        {
          type: "mg_state",
          label: "状态",
        },
        {
          label: "操作",
          type: "action",
          list: [
            {
              type: "primary",
              action: "edit",
              name: "编辑",
            },
            {
              type: "warning",
              action: "star",
              name: "查看",
            },
            {
              type: "danger",
              action: "delete",
              name: "删除",
            },
          ],
        },
      ],
      loandformVal: {},
      loadingdata: {
        title: "",
        formleftwidta: "70px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "input",
            model: "username",
            label: "名字",
          },
          {
            type: "input",
            model: "password",
            label: "密码",
          },
          {
            type: "input",
            model: "email",
            label: "邮箱",
          },
          {
            type: "input",
            model: "mobile",
            label: "手机",
          },
        ],
        // 正则
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
          ],
          email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
          mobile: [
            { required: true, message: "请输入手机号", trigger: "blur" },
          ],
        },
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
      usereditID: 1,
      starformval: {},
      // 查看弹窗数据
      stardata: {
        title: "",
        formleftwidta: "100px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "text",
            model: "username",
            label: "当前用户",
          },
          {
            type: "text",
            model: "role_name",
            label: "当前角色",
          },
          {
            type: "select",
            model: "roles",
            label: "分配角色",
            list: [],
          },
        ],
        // 正则
        rules: {},
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
    });
    // 数据
    const getuserslist = async () => {
      const response = await UsersModel.getuserslist(
        data.pager.currentPage,
        data.pager.pageSize,
        data.topVal
      );
      if (response.data.meta.status == "200") {
        const { total, users } = response.data.data;
        data.pager.total = total;
        data.tableData = users;
      }
    };
    // 页
    const handleSizeChange = (size: number) => {
      data.pager.pageSize = size;
      getuserslist().then(() => ElMessage.success("搜索成功"));
    };
    // 条
    const handleCurrentChange = (page: number) => {
      data.pager.currentPage = page;
      getuserslist().then(() => ElMessage.success("搜索成功"));
    };
    // 表格按钮
    // { action, id }
    interface handeltablebutton {
      action: any;
      id: any;
    }
    const handeltablebutton = (anyEI: handeltablebutton) => {
      const { action, id } = anyEI;
      if (action == "delete") {
        deleteuserslist(id);
      } else if (action == true || action == false) {
        putuserliststate(id, action);
      } else if (action == "edit") {
        handleEditDialog(id);
      } else if (action == "star") {
        handlestarDialog(id);
      }
    };
    // 删除方法
    const deleteuserslist = (id: number) => {
      ElMessageBox.confirm("确定要删除这条数据吗?", "警告！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const response = await UsersModel.deleteuserlist(id);
          if (response.data.meta.status == "200") {
            getuserslist().then(() =>
              ElMessage.success(response.data.meta.msg)
            );
          }
        })
        .catch(() => {
          ElMessage.error("取消删除");
        });
    };
    // 修改状态方法
    const putuserliststate = async (id: number, state: boolean) => {
      const response = await UsersModel.putuserliststate(id, state);
      if (response.data.meta.status == "200") {
        getuserslist().then(() => ElMessage.success(response.data.meta.msg));
      } else {
        getuserslist().then(() => ElMessage.success(response.data.meta.msg));
      }
    };
    // top按钮
    interface handeltopbutton {
      action: any;
      topVal: any;
    }
    const handeltopbutton = (anyEI: handeltopbutton) => {
      const { action, topVal } = anyEI;
      if (action == "seach") {
        // 搜索
        data.topVal = topVal.seachVal || "";
        getuserslist().then(() => ElMessage.success("搜索成功"));
      } else if (action == "add") {
        handleOpenDialog();
      }
    };
    //添加弹窗
    const handleOpenDialog = () => {
      data.loadingdata.dialogFormVisible = true;
      data.loadingdata.title = "添加用户";
    };
    // 编辑弹窗
    const handleEditDialog = (id: number) => {
      data.loadingdata.dialogFormVisible = true;
      data.loadingdata.title = "用户编辑";
      finduserslist(id);
    };
    // 查看弹窗
    const handlestarDialog = (id: number) => {
      data.stardata.dialogFormVisible = true;
      data.stardata.title = "查看用户";
      finduserslist(id);
      getroleslist();
    };
    // 关闭清空弹窗
    const handleDialogReset = () => {
      data.loadingdata.dialogFormVisible = false;
      data.loandformVal = {};
    };
    //弹窗按钮
    const handelloandbutton = (anyEI: any) => {
      if (anyEI == "yes") {
        // 确定
        postuserslist();
      } else if (anyEI == "no") {
        // 取消
        handleDialogReset();
        ElMessage.success("取消");
      }
    };
    // 权限分配按钮
    const starbutton = (anyEI: any) => {
      console.log(anyEI);
      if (anyEI == "yes") {
        // 确定
        handleReset();
        console.log(data.starformval);
      } else if (anyEI == "no") {
        // 取消
        handleReset();
      }
    };
    // 关闭分配清空
    const handleReset = () => {
      data.stardata.dialogFormVisible = false;
      data.starformval = {};
    };
    // 发送数据方法
    const postuserslist = async () => {
      if (data.usereditID == 1) {
        //  添加
        const response = await UsersModel.adduserslist(data.loandformVal);
        if (response.data.meta.status == "200") {
          getuserslist().then(() => ElMessage.success(response.data.meta.msg));
        } else {
          ElMessage.success(response.data.meta.msg);
        }
        handleDialogReset();
      } else {
        const response = await UsersModel.edituserlist(
          data.usereditID,
          data.loandformVal
        );
        if (response.data.meta.status == "200") {
          getuserslist().then(() => ElMessage.success(response.data.meta.msg));
        } else {
          ElMessage.success(response.data.meta.msg);
        }
        handleDialogReset();
      }
    };
    // 单数据查询
    const finduserslist = async (id: number) => {
      data.usereditID = id;
      const response = await UsersModel.finduserslist(id);
      if (response.data.meta.status == 200) {
        data.loandformVal = response.data.data;
        data.starformval = response.data.data;
      }
    };
    //  用户权限查询
    const getroleslist = async () => {
      const response = await UsersModel.getroleslist();
      console.log(response);
      // stardata
      if (response.data.meta.status == 200) {
        data.stardata.formlist[2].list = response.data.data;
      }
    };
    return {
      ...toRefs(data),
      handleSizeChange,
      handleCurrentChange,
      handeltablebutton,
      handeltopbutton,
      handelloandbutton,
      starbutton,
    };
  },
});
</script>
